<html>
<head>
    <title>for(let的测试页面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./.src/index.css">
<head>
<body>
    <div id="console-container">
        <div id="console-input">
            <textarea style="font-family: monospace;"></textarea>  
        </div>
        <div id="console-output">
            <p></p>
        </div>
        <script>
            window.addEventListener('click', (ev)=>{
                for(const iframe of document.querySelectorAll('iframe')){
                    if(iframe.src !== iframe.contentWindow.location.href){
                        iframe.src = iframe.contentWindow.location.href
                    }
                }
            });
        </script>
    </div>
    <div id="main" class="center" onmouseup="this.style.transition='1s';"
        onmousedown="">
        <a v-for="item in btnList" class="btn btn-success" 
            :href="item.href" :onclick="item.click" target="_blank">
            {{item.name}}
        </a>
    </div>
    <div id="path-resolve" class="center" title="上下切换 Tab补全 Shift+Tab父目录">
        <label for="resolve" onmouseenter=pathResolveFocus(); >
            <input class="form-control" id="resolve" value="./testproject/">
            <ul id="pathList"></ul>
        </label>
    </div>
</body>
<script src="./Plug-Ins/vue.js"></script>
<script>
    window.$f=document.querySelector.bind(document);   
    Vue.config.productionTip=false;
    function pathResolveFocus(){
        const _e=$f("#resolve"), _len = _e.value.length;
        _e.focus();
        _e.selectionStart = _e.selectionEnd = _len;
    };
</script>
<script type="module"> 
    window.btnList = (import ("./.src/btnList.js").then(m=>m.getButtonList()));
    window.vm = new Vue({ // el:
        data(){ return { btnList:[] } },
        async mounted() {
            this.btnList = await window.btnList;
            console.log(this.btnList)
            $(".center").draggable();
        },
        methods:{ }
    }).$mount("#main");
    window.getEntries=function(){
        return Object.entries({k1:'v1',k2:'v2'});
    };
    window.getList=function(){
        return Array(5).fill("value").map((e,i)=>e+i);
    };
    window.wait = function (time,now){
        console.log("start wait",now);
        while(new Date()-now <time);
        console.log("end   wait",time);
        return time;
    }
    window.rand=(n=0)=>Math.trunc(Math.random()*n);
    window.randstr = (len=5,strList='ABCDEFGHIJKLMNOPQRSTUVWXYZ',sep='')=>(
        Array(len).fill(0).map(e=>strList[rand(strList.length)]).join('')
    )
    window.choose = (itemList = [0]) => itemList[rand(itemList.length)]
    window.func = function(){console.log(this,Array.from(arguments));};
    window.set = new Set(getList());
    window.map = new Map(getEntries());
    window.obj = Object.fromEntries(getEntries());
    window.arr = getList();
    window.treeGenerate = function (deep = 2, prefix = '',len = 2){
        if(deep <= 0) return undefined;
        return [...Array(len)].map((e, i) => ({
            children: treeGenerate(deep - 1, `${prefix}${i}-`), 
            id: `${prefix}${i}`,
            text: `txt-${prefix}${i}`
        }))
    };
    window.tree = treeGenerate();
    window.createProxy=function(raw){
        return new Proxy(raw,{
            get(raw,key){
                console.log(raw,key);
                return Reflect.get(raw,key);
            },
            set(raw,key,val){
                console.log(raw,key,val);
                return Reflect.set(raw,key,val);
            }
        });
    }
    console.log({ getList, choose, set, map, obj, arr, treeGenerate, tree })
    window.arrpx=createProxy(arr);
    window.randomObj = (deep = 3,_isObj = rand(2))=>{
        if(deep<=0)return "val"+rand(10);
        let isObj = (_isObj === undefined)?rand(2):_isObj;
        let obj = isObj ? {} : [];
        for(let i of Array(rand(3)+2).fill(0).map((e,i)=>i)){
            obj[isObj?"key"+i:i] = randomObj(deep-1,_isObj);
        }
        return obj;
    }
    console.log('randomObj', randomObj())
    window.A = function A(){ this.a=1; }
    window.B = function B(){ A.call(this); this.b=2; }
    B.prototype = Object.create(A);
    B.prototype.constructor = B;
    // Object.create(arrpx);
    JSON.log = (...args)=>{
        console.log(...args.map(e=>JSON.stringify(e,null, 4)));
    };
</script>
<script src="./Plug-Ins/jquery-3.6.0.js"></script>
<!-- <script src="./Plug-Ins/jquery-/jquery_easyui/jquery-ui.js"></script> -->
<script src="./Plug-Ins/BootStrap/js/bootstrap.js"></script>
<script src="./testproject/Projects/PureScript/Js/%E5%9F%BA%E7%A1%80/base/treeRecurse.js"></script>
<script src="https://www.jqueryui.org.cn/code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="./.src/path-resolve.js" type="module"></script>
</html>